import React, { FC, useEffect } from 'react'
import { stateType, connect, ConnectProps, Loading } from 'umi'
import { Spin } from 'antd'
interface Iprops extends ConnectProps {
    data: stateType,
    loading: boolean | undefined
}
const Product: FC<Iprops> = (props) => {
    console.log(props);

    let { dispatch, data, loading } = props
    console.log(data.productList);

    useEffect(() => {
        dispatch!({ type: 'product/getProductList' })
    }, [])
    
    return (
        <Spin spinning={loading}>
            <fieldset>
                <legend>商品</legend>
                <h1>商品列表</h1>
                <ul>
                    {
                        data.productList.map((item: any) => {
                            return <li key={item.id}>{item.title}</li>
                        })
                    }
                </ul>
            </fieldset>
        </Spin>
    )
}
export default connect(({ product, loading }: { product: stateType, loading: Loading }) => ({ data: product, loading: loading.models.product }))(Product)